<div class="content-section introduction">
    <div class="feature-intro">
        <h1>SelectButton</h1>
        <p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Single Selection</h5>
        <p-selectButton [options]="options" [(ngModel)]="value1"></p-selectButton>

        <h5>Multiple Selection</h5>
        <p-selectButton [options]="paymentOptions" [(ngModel)]="value2" multiple="multiple" optionLabel="name"></p-selectButton>

        <h5>Custom Template</h5>
        <p-selectButton [options]="justifyOptions" [(ngModel)]="value3">
            <ng-template let-item>
                <i [class]="item.icon"></i>
            </ng-template>
        </p-selectButton>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SelectButtonModule&#125; from 'primeng/selectbutton';
</app-code>

            <h5>Getting Started</h5>
            <p>SelectButton requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
            instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how 
            the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-selectButton [options]="cities1" [(ngModel)]="selectedCity1"&gt;&lt;/p-selectButton&gt;

&lt;p-selectButton [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"&gt;&lt;/p-selectButton&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SelectItem&#125; from 'primeng/api';

export class MyModel &#123;

    cities1: SelectItem[];

    cities2: City[];

    selectedCity1: City;

    selectedCity2: City;

    constructor() &#123;
      //SelectItem API with label-value pairs
      this.cities1 = [
          &#123;label:'Select City', value:null&#125;,
          &#123;label:'New York', value:&#123;id:1, name: 'New York', code: 'NY'&#125;&#125;,
          &#123;label:'Rome', value:&#123;id:2, name: 'Rome', code: 'RM'&#125;&#125;,
          &#123;label:'London', value:&#123;id:3, name: 'London', code: 'LDN'&#125;&#125;,
          &#123;label:'Istanbul', value:&#123;id:4, name: 'Istanbul', code: 'IST'&#125;&#125;
          &#123;label:'Paris', value:&#123;id:5, name: 'Paris', code: 'PRS'&#125;&#125;
      ];
      
      //An array of cities
      this.cities2 = [
          &#123;name: 'New York', code: 'NY'&#125;,
          &#123;name: 'Rome', code: 'RM'&#125;,
          &#123;name: 'London', code: 'LDN'&#125;,
          &#123;name: 'Istanbul', code: 'IST'&#125;,
          &#123;name: 'Paris', code: 'PRS'&#125;
      ];
    &#125;

&#125;
</app-code>

            <h5>Multiple</h5>
            <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. 
                In multiple case, model property should be an array instance that is not null or undefined.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-selectButton [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" &gt;&lt;/p-selectButton&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SelectItem&#125; from 'primeng/api';

export class MyModel &#123;

    cities: SelectItem[];

    selectedCities: string[] = [];

    constructor() &#123;
        this.cities = [];
        this.cities.push(&#123;label:'New York', value:'New York'&#125;);
        this.cities.push(&#123;label:'Rome', value:'Rome'&#125;);
        this.cities.push(&#123;label:'London', value:'London'&#125;);
        this.cities.push(&#123;label:'Istanbul', value:'Istanbul'&#125;);
        this.cities.push(&#123;label:'Paris', value:'Paris'&#125;);
    &#125;

&#125;
</app-code>

            <h5>Model Driven Forms</h5>
            <p>SelectButton can be used in a model driven form as well.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-selectButton [options]="cities" formControlName="selectedCity"&gt;&lt;/p-selectButton&gt;
</app-code>

            <h5>Icons</h5>
            <p>Button options can display icons using the icon property of the SelectItem API.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-selectButton [options]="types" [(ngModel)]="selectedType"&gt;&lt;/p-selectButton&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class SelectButtonDemo &#123;

    types: SelectItem[];

    selectedType: string;

    constructor() &#123;
        this.types = [
            &#123;label: 'Apartment', value: 'Apartment'&#125;,
            &#123;label: 'House', value: 'House'&#125;,
            &#123;label: 'Studio', value: 'Studio'&#125;
        ];
    &#125;
&#125;
</app-code>

            <h5>Disabled Options</h5>
            <p>Particular options can be prevented from selection using the disabled property of SelectItem API.</p>

            <h5>Templating</h5>
            <p>Items support templating to display custom content inside the buttons using an ng-template that receives the option as the implicit variable. Note that
                if an arbitrary object is used as the option instead of the SelectItem API, internally they are converted to SelectItems which means in the template
                the arbitrary object can be access using the value property.
            </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-selectButton [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name"&gt;
    &lt;ng-template let-item&gt;
        &lt;img src="assets/showcase/images/demo/flag/&#123;&#123;item.value.flag&#125;&#125;" /&gt;
        &lt;span&gt;&#123;&#123;item.name&#125;&#125;&lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/p-selectButton&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class SelectButtonDemo &#123;
        
    countries: any[];

    selectedCountry: any;

    constructor() &#123;
        this.countries = [
            &#123;name: 'USA', flag: 'usa.png'&#125;,
            &#123;name: 'Germany', flag: 'germany.png'&#125;,
            &#123;name: 'Japan', flag: 'japan.png'&#125;
        ];
    &#125;

&#125;
</app-code>


            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>options</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of selectitems to display as the available options.</td>
                        </tr>
                        <tr>
                            <td>optionLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
                        </tr>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, allows selecting multiple values.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>ariaLabelledBy</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                        <tr>
                            <td>dataKey</td>
                            <td>string</td>
                            <td>null</td>
                            <td>A property to uniquely identify a value in options.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onChange</td>
                            <td>event.originalEvent: browser event<br />
                                event.value: single value or an array of values that are selected
                            </td>
                            <td>Callback to invoke when value changes.</td>
                        </tr>
                        <tr>
                            <td>onOptionClick</td>
                            <td>event.originalEvent: browser event<br />
                                event.option: SelectItem instance of the clicked button<br />
                                event.index: Index of the clicked button
                            </td>
                            <td>Callback to invoke when a button is clicked.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/selectbutton" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-selectbutton-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Single Selection&lt;/h5&gt;
&lt;p-selectButton [options]="options" [(ngModel)]="value1"&gt;&lt;/p-selectButton&gt;

&lt;h5&gt;Multiple Selection&lt;/h5&gt;
&lt;p-selectButton [options]="paymentOptions" [(ngModel)]="value2" multiple="multiple" optionLabel="name"&gt;&lt;/p-selectButton&gt;

&lt;h5&gt;Custom Template&lt;/h5&gt;
&lt;p-selectButton [options]="justifyOptions" [(ngModel)]="value3"&gt;
    &lt;ng-template let-item&gt;
        &lt;i [class]="item.icon"&gt;&lt;/i&gt;
    &lt;/ng-template&gt;
&lt;/p-selectButton&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class SelectButtonDemo &#123;

    options: SelectItem[];

    paymentOptions: any[];

    justifyOptions: any[];

    value1: string = "off";

    value2: string;

    value3: any;

    constructor() &#123;
        this.options = [&#123;label: 'Off', value: 'off'&#125;, &#123;label: 'On', value: 'on'&#125;];

        this.paymentOptions = [
            &#123;name: 'Option 1', value: 1&#125;,
            &#123;name: 'Option 2', value: 2&#125;,
            &#123;name: 'Option 3', value: 3&#125;
        ];

        this.justifyOptions = [
            &#123;icon: 'pi pi-align-left', value: 'left'&#125;,
            &#123;icon: 'pi pi-align-right', value: 'Right'&#125;,
            &#123;icon: 'pi pi-align-center', value: 'Center'&#125;,
            &#123;icon: 'pi pi-align-justify', value: 'Justify'&#125;
        ];
    &#125;

&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-selectbutton-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
